iT邦幫忙

2021 iThome 鐵人賽

DAY 23
2
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 23

Flexbox-30天學會HTML+CSS,製作精美網站

  • 分享至 

  • xImage
  •  

以前排版都會使用float、display屬性的block、inline來製作,現在有了Flexbox,幾乎可以解決各種排版需求。

Flexbox是什麼

flex 是Flexible Box的縮寫,中文為彈性布局,是由 Flex Containers (父元素)和 Flex Items (子元素)他組成,依據單一 橫向或垂直方向放置內容,可以解決過去複雜的版面配置問題,像是水平垂直置中。
https://ithelp.ithome.com.tw/upload/images/20211008/20112053gGHpANzHYH.png

彈性區塊宣告

display: flex/inline-flex
  • flex:區塊層級,類似display:block
  • inline-flex:行內層級,類似display:inline-block
    範例:分別將.box設置flex及inline-flex,文字的部分一個會換行,另一個不會
<div class="box">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <span>text</span><div class="flex">
    <div class="box">
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
    <span>display:flex</span>
  </div>
  <div class="inline-flex">
    <div class="box">
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
    <span>display:inline-flex</span>
  </div>
.box{
  width: 350px;
  padding: 15px 10px;
  background-color: #dee2e8;
}
.item{
  width: 100%;
  padding: 15px;
  text-align: center;
  background-color: #bdc2ca;
  margin: 0 5px;
}
.flex .box{
  display: flex;
}
.inline-flex .box{
  display: inline-flex;
}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053hkfqCBDYwW.png

Flex Container

flex-direction

設定子元素排列方向,水平或是垂直

屬性

  • row:由左到右,由上到下,預設值
  • row-reverse:與row相反
  • column:由上到下,由左到右
  • column-reverse:與column相反
    https://ithelp.ithome.com.tw/upload/images/20211008/20112053xdgllbdUXX.png

flex-wrap

讓子元素排成一行或多行,當子元素超過父元素寬度時是否要換行。

屬性

  • nowrap:單行,預設值
  • wrap:多行
  • wrap-reverse:單行,反轉
    https://ithelp.ithome.com.tw/upload/images/20211008/20112053cG4UQ9MYD1.png

flex-flow

是flex-direction及flex-wrap的簡寫

flex-flow: flex-direction flex-wrap

justify-content

水平對齊方式

屬性

  • flex-start:預設值,靠左對齊,從行頭開始
  • flex-end:靠右對齊,從行尾開始
  • center:水平置中對齊
  • space-between:平均分配內容,會對齊行頭及行尾
  • space-around:內容間距都會平均分配
    https://ithelp.ithome.com.tw/upload/images/20211008/20112053jsqZ8gCU8w.png

align-items

垂直對齊方式

屬性

  • stretch:預設值,元素高度會填滿容器高度
  • flex-start:對齊父元素起始位置開始排列
  • flex-end:對齊父元素終點位置開始排列
  • center:垂直置中對齊
  • baseline:內容的基線作為對齊線
    https://ithelp.ithome.com.tw/upload/images/20211008/20112053uz0pkzIsy4.png

align-content

與align-items相似,只是align-content是處理多行,但父元素設定flex-wrap:nowrap,變成一行時會無效

屬性

  • flex-start:對齊最上面的 cross start
  • flex-end:對齊最下面的 cross end
  • center:垂直置中
  • stretch:元素高度會填滿容器高度
  • space-between:第一行與最後一行分別對齊最上方與最下方
  • space-around:平均分配間距
    https://ithelp.ithome.com.tw/upload/images/20211008/20112053EAyTcJsL90.png

Flex-item

order

可依照自己的規劃,由小到大排出區塊的順序

<div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
.box{
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  padding: 15px 10px;
  background-color: #dee2e8;
  align-items: flex-start;
}
.item{
  width: 30px;
  padding: 15px;
  text-align: center;
  background-color: #bdc2ca;
  margin: 5px;
}
.item1{
  order:3;
}
.item2{
  order:1;
}
.item3{
  order:4;
}
.item4{
  order:2;
}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053q340lZ3c3H.png

align-self

與align-items相同,用於覆寫已經套用 align-items 的屬性

範例:將2區塊個別設定align-self:flex-end
https://ithelp.ithome.com.tw/upload/images/20211008/20112053w6t27usFOJ.png

flex-grow

依照比例分配剩餘空間。

當區塊物件小於容器寬度時會留白,為了不要留白個別讓區塊放大預設為0,不會有彈性變化,不可為負值。

flex-grow:數值
<div class="box">
  <div class="item" style="background-color:red;"></div>
  <div class="item" style="background-color:green;"></div>
  <div class="item" style="background-color:blue;"></div>
</div>

寬度為350px,item寬度為100px,就會有多餘的空間50px

.box .item{
  width: 100px;
}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053Kw8V0BDJbA.png
將紅色區塊改為flex-grow: 1,就會將剩餘空間的50px給紅色區塊
https://ithelp.ithome.com.tw/upload/images/20211008/20112053EO6L2aEMqH.png

.box div:nth-of-type(1) {flex-grow: 1;}
.box div:nth-of-type(2) {flex-grow: 3;}
.box div:nth-of-type(3) {flex-grow: 2;}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053zPtGuZ3sNI.png

flex-shrink

當區塊物件大於容器寬度會超出範圍,會個別區塊做縮小預設值為1,不可為負數,數值0不會有彈性變化。

flex-shrink:數值
<div class="box">
  <div class="item siderbar" style="background-color:red;"></div>
  <div class="item content" style="background-color:green;"></div>
</div>

.box寬度為100%,當容器寬度不夠寬時,會縮小.content區塊的寬度,.siderbar寬度都會是100px,直到寬度不足時,才會按比例縮放

.siderbar{
  flex-basis: 100px;
}
.content{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 500px;
}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053Jtl3AU54e3.png

flex-basis

設定區塊的大小,預設為auto,依據內容設置寬度,與width類似,但優先程度較高

flex-basis:數值/auto
<div class="box">
  <div style="background-color:red;"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
</div>
.box {
  width: 350px;
  height: 100px;
  display: flex;
}
.box div{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}
.box div:nth-of-type(2) {
	flex-basis: 100px;
}

https://ithelp.ithome.com.tw/upload/images/20211008/20112053axrJKaHTas.png

flex統一設定屬性

flex: none flex-grow flex-shrink flex-basis

參考資料:
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://blog.camel2243.com/2019/11/14/css-搞懂-flex-grow-flex-shirk-及-flex-basis-三種屬性/


上一篇
網頁定位-30天學會HTML+CSS,製作精美網站
下一篇
網頁編排Grid-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言